import { DrawerForm } from '@ant-design/pro-components';
import { useNode } from '@craftjs/core';
import type { CardBasicInfoProps } from '@jeoshi-pro/pro-rex.business.card-basic-info';
import { Button, Collapse, Input, Radio, Tabs, Typography } from 'antd';
import FormItem from 'antd/es/form/FormItem';
import { Cell } from './components/cell';
import { Table } from './components/table';

export const Settings = () => {
  const {
    title,
    type = 'info',
    actions: { setProp },
  } = useNode<CardBasicInfoProps>((node) => ({
    ...node.data.props,
  }));

  return (
    <>
      <Typography.Title level={3}>Card Info Settings</Typography.Title>
      <Tabs type="card">
        <Tabs.TabPane key={'tab1'} tabKey="tab1" tab="通用设置">
          <Collapse defaultActiveKey={['1', '2']}>
            <Collapse.Panel header="标题" key={'1'}>
              <FormItem label="标题">
                <Input
                  value={title as string}
                  placeholder="请输入标题"
                  onChange={(e) =>
                    setProp(
                      (props: CardBasicInfoProps) =>
                        (props.title = e.target.value),
                    )
                  }
                />
              </FormItem>
            </Collapse.Panel>
            <Collapse.Panel header="内容" key={'2'}>
              <Radio.Group
                optionType="button"
                value={type}
                onChange={(e) =>
                  setProp(
                    (props: CardBasicInfoProps) =>
                      (props.type = e.target.value),
                  )
                }
              >
                <Radio value={'info'}>Info</Radio>
                <Radio value={'table'}>Table</Radio>
              </Radio.Group>
              <div>
                {type === 'info' && (
                  <DrawerForm
                    trigger={<Button type="text">编辑</Button>}
                    submitter={false}
                  >
                    <Cell />
                  </DrawerForm>
                )}
                {type === 'table' && (
                  <DrawerForm
                    trigger={<Button type="text">编辑</Button>}
                    submitter={false}
                  >
                    <Table />
                  </DrawerForm>
                )}
              </div>
            </Collapse.Panel>
          </Collapse>
        </Tabs.TabPane>
        <Tabs.TabPane key={'tab2'} tabKey="tab2" tab="样式设置"></Tabs.TabPane>
      </Tabs>
    </>
  );
};
